 <template lang="html">
  <div class="">
    <div class="search">
        <div class="input">
            <p>
              <label>负责区域：</label>
              省：<el-select placeholder="请输入内容" v-model="pageData.ProvinceId" @change="getCity">
                    <el-option value=''>请选择</el-option>
                    <el-option
                      v-for="(item,key) in pageData.province"
                      :key="key"
                      :value='item.id'
                      :label="item.districtName"
                      >
                    </el-option>
                  </el-select>&nbsp;&nbsp;
              市：<el-select placeholder="请输入内容" v-model="pageData.cityId" @change="getDistrict">
                  <el-option value=''>请选择</el-option>
                    <el-option
                      v-for="(item,key) in pageData.city"
                      :key="key"
                      :value='item.id'
                      :label="item.districtName"
                      >
                    </el-option>
                  </el-select>&nbsp;&nbsp;
              区：<el-select placeholder="请输入内容"  v-model="pageData.districtId">
                  <el-option value=''>请选择</el-option>
                    <el-option
                      v-for="(item,key) in pageData.district"
                      :key="key"
                      :value='item.id'
                      :label="item.districtName"
                      >
                    </el-option>
                  </el-select>&nbsp;&nbsp;
            </p>
            <p><label>是否为负责人：</label>
              <el-select placeholder="请输入内容" v-model="searchData.principal">
                  <el-option value=''>请选择</el-option>
                    <el-option value='Y' label='是'>是</el-option>
					<el-option value='N' label="否">否</el-option>

                  </el-select>&nbsp;&nbsp;
            </p>
            <p><label>手机号：</label>
              <el-input v-model="searchData.isMobile"   placeholder="请选择">
                </el-input>
            </p>

            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">新增评估师</el-button>
      <el-button type="danger" @click="del">批量删除</el-button>
    </div>
    <tableVue :list="list" :state="true" v-loading="listLoading" :total="total"  @changeData="selectionVal" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type='success'
                  @click="takeAddress(scope.row)">负责区域
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
     <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
      <slot>
        <el-form :model="formData" ref="pageData" :rules="rules"  label-width="120px" class="demo-ruleForm">
			 <el-form-item label="请选择省市区：" v-if="btnState==1">
                  <el-select placeholder="请输入内容" v-model="newAppData.provinceId" size="mini" class="region" @change="getNewCity">
                    <el-option value="">请选择</el-option>
                        <el-option
							v-for="(item,key) in newAppData.province"
							:key="key"
							:value='item.id'
							:label="item.districtName"
                        >
                    </el-option>
                  </el-select>
				  <el-select placeholder="请输入内容" v-model="newAppData.cityId" size="mini" class="region" @change="getNewDistrict">
                    <el-option value="" v-if="btnState==1">请选择</el-option>
                        <el-option
							v-for="(item,key) in newAppData.city"
							:key="key"
							:value='item.id'
							:label="item.districtName"
                        >
                    </el-option>
                  </el-select>
				  <el-select placeholder="请输入内容" v-model="newAppData.districtId" size="mini" class="region" @change="getShopList">
                    <el-option value="" v-if="btnState==1">请选择</el-option>
                        <el-option
                        	v-for="(item,key) in newAppData.district"
							:key="key"
							:value='item.id'
							:label="item.districtName"

                        >
                    </el-option>
                  </el-select>
              </el-form-item>
             <el-form-item label="门店：">
                  <el-select placeholder="请输入内容" v-model="formData.storeId">
                    <el-option value="">请选择</el-option>
                        <el-option
                          v-for="(item,key) in store"
                          :key="key"
                          :value='item.storeId'
                          :label="item.storeDesc"
                        >
                    </el-option>
                  </el-select>
              </el-form-item>
               <el-form-item label="员工：" prop="staffId" >
                  <el-select placeholder="请输入内容" v-model="formData.staffId" filterable>
                    <el-option value="">请选择</el-option>
                        <el-option
                          v-for="(item,key) in staff"
                          :key="key"
                          :value='item.empId'
                          :label="item.empName"
                        >
                    </el-option>
                  </el-select>
              </el-form-item>
			  <el-form-item label="是否能够接单">
                    <el-switch
                        v-model="formData.takeOrder" active-value="Y" inactive-value="N"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
              </el-form-item>
              <el-form-item label="是否为负责人">
                    <el-switch
                        v-model="formData.Manager" active-value="Y" inactive-value="N"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
              </el-form-item>
              <el-form-item class="confirm">
                  <el-button type="primary" v-if="btnState=='1'" @click="submitForm('post')">提交</el-button>
                  <el-button type="primary" v-if="btnState=='2'" @click="upForm('ruleForm')">更新</el-button>
              </el-form-item>
        </el-form>
      </slot>
     </dialogVue>
     <el-dialog
      title="提示"
      :visible.sync="take"
      width="60%">
      <p><el-button type="primary" @click="address">添加负责区域</el-button></p>
      <tableVue :list="takeList" :state="false" v-loading="pageData.loading" :total="total" :pagination="true">
		  <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="delAppRegion(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
	  </tableVue>

      <span slot="footer" class="dialog-footer">
        <el-button @click="take = false">取 消</el-button>
        <el-button type="primary" @click="take = false">确 定</el-button>
      </span>
    </el-dialog>
     <dialogVue title="操作" :dialog="addtake" @close="changeData" :state="false">
         <slot>
            <el-form :model="addPageData" ref="takeData" :rules="regionRules"  label-width="120px" class="demo-ruleForm">
              <el-form-item label="省" prop="provinceId">
                 <el-select placeholder="请输入内容" v-model="addPageData.provinceId" @change="getCitys">
                   <el-option value="">请选择</el-option>
                       <el-option
                         v-for="(item,key) in addPageData.province"
                         :key="key"
                         :value='item.id'
                         :label="item.districtName"
                       >
                   </el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="市" prop="cityId">
                <el-select placeholder="请输入内容" v-model="addPageData.cityId" @change="getDistricts">
                  <el-option value="">请选择</el-option>
                      <el-option
                        v-for="(item,key) in addPageData.city"
                        :key="key"
                        :value='item.id'
                        :label="item.districtName"
                      >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区" prop="districtId">
               <el-select placeholder="请输入内容" v-model="addPageData.districtId">
                 <el-option value="">请选择</el-option>
                     <el-option
                       v-for="(item,key) in addPageData.district"
                       :key="key"
                       :value='item.id'
                       :label="item.districtName"
                     >
                 </el-option>
               </el-select>
           </el-form-item>
           <el-form-item class="confirm">
               <el-button type="primary" v-if="btnState=='1'" @click="confirm()">确定</el-button>
               <el-button type="primary" v-if="btnState=='2'" @click="upForm('ruleForm')">更新</el-button>
           </el-form-item>
            </el-form>
         </slot>
     </dialogVue>
  </div>
</template>

<script>
  import Data from './appraiserAdmin.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    getReginal,
    shopList
    } from '@/api/product/product'
  import { staffList } from '@/api/staff/staff'
  import {
    addAppraiser,
    addAppraiserList,
    addTakeArea,
    delAppraiser,
    getProvinceList,
    getCityList,
	getRegionList,
	getAppRegionList,
	delAppRegionList,
	getStoreList,
	editAppraiser
  } from '@/api/appraiserAdmin/appraiserAdmin'
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
      this.getProvince(); //拉取省列表
      this.getaddAppraiserList();
      this.getStaffList();
      //this.getShopList();

    },
    methods: {
        getaddAppraiserList(data) { //获取评估师列表.
        this.listLoading =true;
			addAppraiserList(data).then(res=>{
				if (res.data.code == 'OK') {
					this.listLoading =false;
					// this.total = res.data.data.total;
					this.list.tbody = res.data.data.records.map(item=>{
					item.isManager  = item.isManager == 'Y' ?'是':'否';
					item.gmtCreate = this.switchTime(item.gmtCreate)
					item.gmtUpdate = this.switchTime(item.gmtUpdate)
					return item;
					});
				}
			})
		},
		getProvince () { //get省份
			getProvinceList().then(res=>{
				if(res.data.code=="OK"){
					this.pageData.province = res.data.data;
					this.addPageData.province = res.data.data;
					this.newAppData.province = res.data.data;
					// this.pageData.city=[];
					// this.pageData.cityId=''
					// this.pageData.district=[];
					// this.pageData.districtId='';
				}else{
					this.$message.error('拉取省失败！')
				}
			})
		},
		getCity(val){ //获取城市
			if(val){
				let data={
					provinceId:val
				}
					getCityList(data).then(res=>{
						if(res.data.code=="OK"){
							this.pageData.city = res.data.data;
							this.pageData.cityId='';
							this.pageData.districtId=''
						}else{
							this.$message.error('拉取城市失败！')
						}
					})

			}else{
					this.pageData.city=[];
					this.pageData.cityId=''
					this.pageData.district=[];
					this.pageData.districtId='';
			}
		},
		getNewCity(val){ //获取城市
			if(val){
				let data={
					provinceId:val
				}
				this.getShopList();
				if(val!="全国"){
					getCityList(data).then(res=>{
						if(res.data.code=="OK"){
							this.newAppData.city = res.data.data;
							this.newAppData.cityId='';
							this.newAppData.districtId=''

						}else{
							this.$message.error('拉取城市失败！')
						}
					})
				}else{
					this.newAppData.cityId='所有市'
					this.newAppData.districtId='所有地区';
					this.newAppData.city=[];
					this.newAppData.district=[];
				}
			}else{
				    this.getShopList();
					this.newAppData.city=[];
					this.newAppData.cityId=''
					this.newAppData.district=[];
					this.newAppData.districtId='';
			}
		},
		getCitys(val){ //获取城市
			if(val){
				let data={
					provinceId:val
				}
				if(val!="全国"){
					getCityList(data).then(res=>{
						if(res.data.code=="OK"){
							this.addPageData.city = res.data.data;
							this.addPageData.cityId='';
							this.addPageData.districtId=''

						}else{
							this.$message.error('拉取城市失败！')
						}
					})
				}else{
					this.addPageData.cityId='所有市'
					this.addPageData.districtId='所有地区';
					this.addPageData.city=[];
					this.addPageData.district=[];
				}
			}else{
					this.addPageData.city=[];
					this.addPageData.cityId=''
					this.addPageData.district=[];
					this.addPageData.districtId='';
			}
		},
		getDistrict(val){ //获取地区
			if(val){
				let data={
					cityId:val
				}
				getRegionList(data).then(res=>{
					if(res.data.code=="OK"){
						this.pageData.district = res.data.data;
						this.pageData.districtId='';
					}else{
						this.$message.error('拉取地区失败！')
					}
				})
			}else{
					this.addPageData.district=[];
					this.addPageData.districtId='';
			}
		},
		getNewDistrict(val){ //获取地区
			if(val){
				this.getShopList();
				let data={
					cityId:val
				}
				getRegionList(data).then(res=>{
					if(res.data.code=="OK"){
						this.newAppData.district = res.data.data;
						this.newAppData.districtId='';
					}else{
						this.$message.error('拉取地区失败！')
					}
				})
			}else{
				this.getShopList();
				this.newAppData.district=[];
				this.newAppData.districtId='';
			}
		},
		getDistricts(val){ //获取地区
			if(val){
				if(val=="所有市"){
					this.addPageData.districtId='所有地区';
					return;
				}
				let data={
					cityId:val
				}
				getRegionList(data).then(res=>{
					if(res.data.code=="OK"){
						this.addPageData.district = res.data.data;
						this.addPageData.districtId='';
					}else{
						this.$message.error('拉取地区失败！')
					}
				})
			}else{
				this.addPageData.district=[];
				this.addPageData.districtId='';
			}
		},
		search () { //顶部筛选评估师
			let data ={};
			this.pageData.ProvinceId&&(data.provinceId = this.pageData.ProvinceId);
			this.pageData.cityId&&(data.cityId = this.pageData.cityId);
			this.pageData.districtId&&(data.areaId = this.pageData.districtId);
			this.searchData.isMobile&&(data.empMobile = this.searchData.isMobile);
			this.searchData.principal&&(data.isManager = this.searchData.principal);
			this.getaddAppraiserList(data);

		},
		getShopList () {
			let data ={
			};
			this.newAppData.provinceId&&(data.provinceId =this.newAppData.provinceId);
			this.newAppData.cityId&&(data.cityId =this.newAppData.cityId);
			this.newAppData.districtId&&(data.areaId =this.newAppData.districtId);

				// storeId:'',
				// storeName:'',
				// provinceId:'',
				// cityId:'',
				// areaId:''
			getStoreList (data).then(res=>{
				if(res.data.code =="OK"){
					this.store = res.data.data
          console.log(res);
				}
			});
		},
		getStaffList () {
			staffList ().then(res=>{
				if(res.data.code =="OK"){
					this.staff = res.data.data.records
				}
			});
		},
		add () { //新增评估师

			this.formData.storeId='';
			this.formData.staffId='';
			this.dialog = true;
			this.btnState ='1';
			this.$refs.pageData&&(this.$refs.pageData.resetFields());
			// this.formData={
			// 	Manager:'N'};
			this.newAppData.provinceId='';
			this.newAppData.cityId='';
			this.newAppData.districtId='';
			this.getShopList();//拉取门店

		},

		del (item) {//删除评估师
			if (this.usaId.length > 0) {
				let id = ''
				this.usaId.map(item=>{
					id += item.usaId + ','
				})
				id = (id.substring(id.length-1)==',')?id.substring(0,id.length-1):id;
				var data =  {
					usaId : id
				}
				this.delMessage(()=>{
					delAppraiser(data).then(res=>{
						if (res.data.code == 'OK') {
						this.$message.success('删除成功');
							this.getaddAppraiserList();
						} else {
							this.$message.error(res.data.message);
						}
					})
				})
			} else {
				this.$message.error('请选择要删掉评估师');
			}
		},
		delAppRegion(data){ //删除评估师负责区域详情
			let res = {
				uarId :data.uarId
			};
			this.delMessage(()=>{
				delAppRegionList(res).then(res=>{
					if(res.data.code=="OK"){
						this.$message.success('删除成功');
						this.getAppRegionLists(this.appraiserId);
					}else{
						this.$message.error(res.data.message);
					}
				})
			})
		},
		upForm () { //编辑评估师提交
			let data ={
				storeId :this.formData.storeId,
				empId :this.formData.staffId,
				isManager:this.formData.Manager,
				isAcceptOrder:this.formData.takeOrder,
				usaId:this.formData.usaId
			}
			editAppraiser(data).then(res=>{
				if(res.data.code=="OK"){
					this.dialog = false;
					this.$message.success('编辑成功！')
					this.getaddAppraiserList();
				}else{
					this.$message.error(res.data.message)
				}
			})

		},
		selectionVal (data) {
			this.usaId = data;
		},
		compile (item) { //编辑评估师
			this.dialog = true;
			this.btnState ='2';
			this.formData.storeId  = item.storeId;
			this.formData.staffId  = item.empId;
      this.formData.Manager  = item.isManager == '是' ? 'Y' : 'N';
			this.formData.takeOrder  = item.isAcceptOrder;
			this.formData.usaId = item.usaId;
      	this.getShopList();//拉取门店
		},
		handSize (value) { //翻页
			let data = {}
			this.pageData.ProvinceId&&(data.provinceId = this.pageData.ProvinceId);
			this.pageData.cityId&&(data.cityId = this.pageData.cityId);
			this.pageData.districtId&&(data.areaId = this.pageData.districtId);
			this.pageData.provinceId&&(data.empMobile = this.pageData.provinceId);
			this.searchData.isMobile&&(data.isManager = this.searchData.isMobile);
			data.current = value;
			data.size = "10";
			this.getaddAppraiserList(data);
		},
		takeAddress (item) {
			this.take = true;
			this.addPageData.usaId = item.usaId;
			this.getAppRegionLists(item.usaId);
		},
		changeData(data){
			this.dialog = data;
			this.addtake = data;
		},
		address () {
			this.addtake = true;
			this.btnState = '1'
			this.addPageData.provinceId='';
			this.addPageData.cityId='';
			this.addPageData.districtId='';
			this.$refs.takeData.clearValidate();

		},
		confirm () {//添加评估师
			this.$refs.takeData.validate((valid) => {
				if (valid) {
					let provinceId = this.addPageData.provinceId=="全国"?"-1":this.addPageData.provinceId,
						cityId = this.addPageData.cityId=="所有市"?"-1":this.addPageData.cityId,
						areaId = this.addPageData.districtId=="所有地区"?"-1":this.addPageData.districtId;
					let data =  {
						provinceId:provinceId ,
						cityId:cityId,
						areaId:areaId ,
						usaId : this.addPageData.usaId,
					}
					addTakeArea(data).then(res=>{

						if (res.data.code == 'OK') {
							this.$message.success('新增成功');
							this.addtake = false;
							this.getAppRegionLists(this.appraiserId);
							this.$refs.takeData.resetFields();
						} else {
							this.$message.error(res.data.message);
						}
					})
				}
			})

		},
		getAppRegionLists (id) { //获取评估师负责区域详情
			this.appraiserId = id;
			let data={
				usaId : id
			}
			getAppRegionList(data).then(res=>{
				if (res.data.code == 'OK') {
					this.takeList.tbody = res.data.data.areaRanges.map(item=>{
						item.gmtCreate = this.switchTime(item.gmtCreate);
						item.gmtUpdate = this.switchTime(item.gmtUpdate);
						return item;
					});

				}
			})
		},
		handleItemChange(value) {//新增评估师 三级联动选择省市区
				let data={
					provinceId:value[0]
				}
				getCityList(data).then(res=>{
						if(res.data.code=="OK"){
							this.newAppData.province.map(item=>{
								if(item.id==value[0]){
									item.cities=res.data.data;
								};
								return item;
							})
						}else{
							this.$message.error('拉取城市失败！')
						}
					})
        },
        handleSize(size){
            console.log(size)
        },
		handleChange(value) {//新增评估师 三级联动选择省市区
			console.log(value)

		},
		submitForm(method){
			this.$refs.pageData.validate((valid) => {
			if (valid) {
				let data ={
					storeId :this.formData.storeId,
					empId :this.formData.staffId,
					isManager:this.formData.Manager,
					isAcceptOrder:this.formData.takeOrder
				}
				addAppraiser(data,method).then((res)=>{
				if (res.data.code == 'OK') {
					this.dialog = false;
					this.getaddAppraiserList();

					if (method == 'post') {
						this.$message.success('新增成功');
					} else {
						this.$message.success('编辑成功');
					}
				} else {
					this.$message.error(res.data.message);
				}
				})
			} else {
				console.log('error submit!!');
				return false;
			}
			});
		}
    },
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;

  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.region{
	width:120px;
}
</style>
